<template>
    <div>
        <Tag color="red" type="border" size="small">音频列表</Tag>
        <!-- 音频列表 【ctrl + c -> ctrl + v】 -->
        <Table :context="self" :columns="columns" :data="recorderList">
        </Table>
    </div>
</template>


<script>
export default {
    data() {
        return {
            self: this,
            recorderList: [
                {recorderNo: 'asdas75asf-ad5fa76s-saf7s6f8', recorderType: 'wav', recorderSize:'1.2M', recorderLength: '03:00'},
                {recorderNo: 'asdas75asf-ad5fa76s-saf78af8', recorderType: 'wav', recorderSize:'1.2M', recorderLength: '03:00'},
                {recorderNo: 'asdas7aasf-ad5fa76s-saf786f8', recorderType: 'wav', recorderSize:'1.2M', recorderLength: '03:00'},
                {recorderNo: 'asdas75asf-ad5fa76s-saf7s6f8', recorderType: 'wav', recorderSize:'1.2M', recorderLength: '03:00'},
            ],

            columns: [
                    {
                        title: '音频编码',
                        key: 'recorderNo',
                        width: 300
                    },
                    {
                        title: '音频格式',
                        key: 'recorderType',
                        width: 200
                    },
                    {
                        title: '音频大小',
                        key: 'recorderSize',
                        width: 200
                    },
                    {
                        title: '音频时长',
                        key: 'recorderLength',
                        width: 200
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    },
                    
            ],
        }
    },

    methods: {
        show (index) {
            this.$Modal.info({
                title: '用户信息',
                content: ``
            })
        },
        remove (index) {
            console.log("remove" + index)
        }
    }
}
</script>


<style scoped>

.button{
    margin: 3px;
}

</style>